<template>
	<text :style="{ color: color, 'font-size': iconSize }" class="iconfont"
		:class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="onClick"></text>
</template>

<script lang="ts">
	import { defineComponent, ref, watch, computed } from 'vue';
	const getVal = (val : any) => {
		const reg = /^[0-9]*$/g
		return (typeof val === 'number' || reg.test(val)) ? val + 'px' : val;
	}
	export default defineComponent({
		name: "use-icons",
		 emits: ['click'], // 指定组件可以触发的事件
		props: {
			type: {
				type: String,
				default: ''
			},
			color: {
				type: String,
				default: '#333333'
			},
			size: {
				type: [Number, String],
				default: 16
			},
			customPrefix: {
				type: String,
				default: ''
			}
		},
		setup(props,{emit}) {
			const iconSize = computed(() => {
				return getVal(props.size)
			})
			const onClick=()=>{
				emit('click')
			}
			return {
				iconSize,onClick
			};
		}
	})
</script>

<style>

</style>